<template>
  <button 
    class="animated-button"
    :class="[`btn-${type}`, `btn-${size}`, { 'loading': loading }]"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <div class="button-content">
      <el-icon v-if="loading" class="loading-icon">
        <Loading />
      </el-icon>
      <el-icon v-else-if="icon" class="button-icon">
        <component :is="icon" />
      </el-icon>
      <span v-if="$slots.default" class="button-text">
        <slot />
      </span>
    </div>
    <div class="ripple-effect" ref="rippleRef"></div>
  </button>
</template>

<script setup>
import { ref } from 'vue'

/**
 * 带动画效果的按钮组件
 * @description 提供轻触动画、悬停反馈和加载状态
 * @param {string} type - 按钮类型：primary(默认)、success、warning、danger、info
 * @param {string} size - 按钮尺寸：small、medium(默认)、large
 * @param {string} icon - 图标名称
 * @param {boolean} loading - 加载状态
 * @param {boolean} disabled - 禁用状态
 */
const props = defineProps({
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'success', 'warning', 'danger', 'info'].includes(value)
  },
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  icon: {
    type: String,
    default: ''
  },
  loading: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click'])
const rippleRef = ref(null)

/**
 * 处理按钮点击事件，添加涟漪效果
 * @param {Event} event - 点击事件
 */
const handleClick = (event) => {
  if (props.loading || props.disabled) return
  
  // 创建涟漪效果
  const ripple = document.createElement('div')
  ripple.className = 'ripple'
  
  const rect = event.currentTarget.getBoundingClientRect()
  const size = Math.max(rect.width, rect.height)
  const x = event.clientX - rect.left - size / 2
  const y = event.clientY - rect.top - size / 2
  
  ripple.style.width = ripple.style.height = size + 'px'
  ripple.style.left = x + 'px'
  ripple.style.top = y + 'px'
  
  rippleRef.value.appendChild(ripple)
  
  // 移除涟漪元素
  setTimeout(() => {
    if (ripple.parentNode) {
      ripple.parentNode.removeChild(ripple)
    }
  }, 600)
  
  emit('click', event)
}
</script>

<style scoped>
.animated-button {
  position: relative;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
}

.button-content {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
  position: relative;
}

.button-icon {
  font-size: 16px;
}

.loading-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 按钮类型样式 */
.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-success {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
}

.btn-warning {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(250, 112, 154, 0.4);
}

.btn-danger {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 154, 158, 0.4);
}

.btn-info {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: #333;
  box-shadow: 0 4px 15px rgba(168, 237, 234, 0.4);
}

/* 按钮尺寸 */
.btn-small {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 8px;
}

.btn-medium {
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 12px;
}

.btn-large {
  padding: 16px 32px;
  font-size: 18px;
  border-radius: 16px;
}

/* 悬停效果 */
.animated-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.animated-button:active:not(:disabled) {
  transform: translateY(0);
}

/* 禁用状态 */
.animated-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* 涟漪效果 */
.ripple-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 加载状态 */
.loading {
  pointer-events: none;
}

.loading .button-text {
  opacity: 0.7;
}
</style> 